<template>
  <div class="page-table">
    <div class="page-filter">
      <div class="query">
        <el-form ref="form" :inline="true" size="small">
          <el-form-item>
            <el-date-picker
                v-model="searchQuery.beginSearchTime"
                type="datetime"
                value-format="timestamp" format="yyyy-MM-dd HH:mm"
                placeholder="开始时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-date-picker
                v-model="searchQuery.endSearchTime"
                type="datetime"
                value-format="timestamp" format="yyyy-MM-dd HH:mm"
                placeholder="结束时间">
            </el-date-picker>
          </el-form-item>
          <!--          <el-form-item>-->
          <!--            <el-select v-model="searchQuery.siteId" placeholder="提车网点" clearable filterable>-->
          <!--              <el-option v-for="item in siteArray" :key="item.id" :label="item.name" :value="item.id"></el-option>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->

          <el-button type="primary" plain size="small" @click="queryList()">查询
          </el-button>
        </el-form>
      </div>
      <div class="op">
        <el-button size="mini" :disabled="additional" @click="addFee">额外费用</el-button>
      </div>
    </div>
    <div class="box-style">
      <div class="top">
        <ad-table :data="deliverRecordList" u-table @sort-change="deliverRecordSortInitList"
                  :data-changes-scroll-top="deliverRecordIsScrollTop"
                  v-loading="deliverRecordInitLoading" @table-body-scroll="deliverRecordGetMoreList"
                  :searchQuery="deliverRecordSearchQuery" @search="deliverRecordGetInitList"
                  @filter-change="deliverRecordFilterInitList"
                  :height="tableHeight" @cell-click="cellClick">
          <ad-table-column label="序号" type="index" ctype="index" fixed/>
          <ad-table-column label="订单号" prop="orderSubNo" ctype="orderNo" searchable>
            <!--                                    <template slot-scope="scope">-->
            <!--                                      <el-input size="mini" v-model="scope.row.orderSubNo"></el-input>-->
            <!--                                    </template>-->
          </ad-table-column>
          <ad-table-column label="制单人" prop="orderCreateUserName" w="3c2f" searchable sortable/>
          <ad-table-column label="制单时间" prop="orderCreateTime" width="130" ctype="datetime" sortable/>
          <ad-table-column label="出发地" prop="startCode" queryPro="startName" ctype="city" w="3c2f" searchable/>
          <ad-table-column label="目的地" prop="destinationCode" queryPro="destinationName" ctype="city" w="3c2f"
                           searchable/>
          <ad-table-column label="交付人" prop="createUserName" w="3c2f" searchable/>
          <ad-table-column label="交付时间" prop="createTime" width="130" ctype="datetime" sortable/>
          <ad-table-column label="收货人" prop="consigneeName" w="3c2f" searchable/>
          <ad-table-column label="联系电话" prop="consigneePhone" ctype="phone-2f" searchable/>
          <ad-table-column label="送车指派人" prop="createUserName" w="3c2f" searchable/>
          <ad-table-column label="送车指派时间" prop="takeCreateTime" width="130" ctype="datetime" sortable/>
          <ad-table-column label="送车地址" prop="takeAddress" ctype="address-2f" searchable/>
          <ad-table-column label="车辆名称" prop="carName" w="4c2f" searchable/>
          <ad-table-column label="车架号" prop="vin" ctype="vin-2f" searchable/>
          <ad-table-column label="送车方式" prop="takeType" w="4c2f" dictName="takecar_type" filterable/>
          <ad-table-column label="送车司机" prop="takeDriverName" w="4c2f" filterable/>
          <ad-table-column label="运输方式" prop="transportType" dictName="transport_way" filterable w="4c1f"/>
          <ad-table-column label="结算人" prop="takeSettlementName" w="3c2f" searchable/>
          <ad-table-column label="结算方式" prop="takeSettlementType" w="4c2f" dictName="settlement_type" filterable/>
          <ad-table-column label="结算电话" prop="takeSettlementPhone" ctype="phone-2f" searchable/>
          <ad-table-column label="送车费" prop="takeFee" w="3c2f" sortable/>
          <ad-table-column label="订单备注" prop="remark" ctype="remark"/>
          <el-table-column fixed="right" label="操作" width="80">
            <template slot-scope="scope">
              <el-button @click.stop="goBack(scope.row)" type="danger" size="mini">回退</el-button>
            </template>
          </el-table-column>
        </ad-table>
      </div>
      <!--      底部弹出框-->
<!--      <el-drawer-->
<!--        size="36%"-->
<!--        :visible.sync="drawer"-->
<!--        direction="btt"-->
<!--        :with-header="false">-->
      <el-dialog
        title="提示"
        :visible.sync="drawer"
        width="95%">
      <div id="bottom" class="bottom" style="min-height: 400px">
        <div class="title-bar" v-if="!isInspect"
             style="height:36px;"></div>
        <div v-if="!isInspect"
             style="text-align: center;margin: 40px auto;font-size: 14px;color:rgba(96,98,102,0.5);">
          <div style="height:44px;">
            <img :src="noData"/>
          </div>
          暂无内容
        </div>

        <div v-else-if="isInspect">
          <div class="title-bar">
            <h2>订单编号 : {{orderSubNo}}</h2>
          </div>
          <div class="content">
            <div class="left" style="min-width: 460px">
              <div class="form-wrapper assign" style="position: relative">
                <h3>送车信息</h3>
                <div v-if="isHasInspect" class="op" style="position: absolute;top:3px;right:5px;">
                  <el-button v-if="!isEditDraw" size="mini" type="primary" plain @click="editDelivery">修改送车</el-button>
                  <el-button v-else size="mini" type="primary" plain @click="updateTake()">
                    保存
                  </el-button>
                  <el-button v-show="isEditDraw" size="mini" type="primary" plain @click="isEditDraw=false">
                    取消
                  </el-button>
                </div>
                <el-descriptions v-if="isHasInspect" :column="2" border size="mini" style="overflow: auto;">
                  <el-descriptions-item label="指派结算人时间">
                    <!--                    <el-date-picker size="mini" style="width: 160px;margin: -5px 0;" v-if="isEditDraw" v-model="data.createTime"-->
                    <!--                                    value-format="timestamp" format="yyyy-MM-dd HH:mm" type="datetime" placeholder="请输入"-->
                    <!--                                    clearable/>-->
                    <value :model="data" prop="createTime" style="width: 138px;display: inline-block;" type="datetime"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="指派人">
                    <value :model="data" prop="createUserName" style="width: 102px;display: inline-block;"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="公司名称" :span="2">
                    <el-input :disabled="dialogSettlerVisible" @focus="showGetList" style="margin: -5px 0;width: 322px;"
                              v-if="isEditDraw" size="mini"
                              v-model="data.company"/>
                    <value v-else :model="data" prop="company"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="结算人">
                    <el-input :disabled="dialogSettlerVisible" @focus="showGetList" v-if="isEditDraw" size="mini"
                              v-model="data.settlementName"
                              style="width:110px;margin: -5px 0;"/>
                    <value v-else :model="data" prop="settlementName" style="width: 138px;display: inline-block;"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="结算电话">
                    <el-input :disabled="dialogSettlerVisible" @focus="showGetList" v-if="isEditDraw" size="mini"
                              v-model="data.settlementPhone"
                              style="width:100px;margin: -5px 0;"/>
                    <value v-else :model="data" prop="settlementPhone" style="width: 102px"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="结算方式">
                    <ad-status-select style="width: 110px;margin: -5px 0;" size="mini" v-if="isEditDraw"
                                      v-model="data.settlementType"
                                      :dict="dict.settlement_type"/>
                    <value v-else :model="data" prop="settlementType" dictName="settlement_type" style="width: 110px"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="送车费">
                    <el-input v-if="isEditDraw" size="mini" maxLength="6" v-model="data.takeCarFee"
                              style="width:100px;margin: -5px 0;"/>
                    <value v-else :model="data" prop="takeCarFee" style="width: 110px"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="指派司机时间">
                    <value :model="data" prop="assignDriverTime" type="datetime" style="width: 110px"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="指派人">
                    <value :model="data" prop="assignDriverUserName" style="width: 110px"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="司机姓名">
                    <el-input :disabled="dialogDriverVisible" @focus="showDriverList" v-if="isEditDraw" size="mini"
                              v-model="data.driverName"
                              style="width:110px;margin: -5px 0;"/>
                    <value v-else :model="data" prop="driverName" style="width: 110px"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="司机电话">
                    <el-input :disabled="dialogDriverVisible" @focus="showDriverList" v-if="isEditDraw" size="mini"
                              v-model="data.driverPhone"
                              style="width:100px;margin: -5px 0;"/>
                    <value v-else :model="data" prop="driverPhone" style="width: 110px"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="身份证号">
                    <el-input :disabled="dialogDriverVisible" @focus="showDriverList" v-if="isEditDraw" size="mini"
                              v-model="data.driverCardNumber"
                              style="width:110px;margin: -4px 0;"/>
                    <value v-else :model="data" prop="driverCardNumber" style="width: 110px"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="小板车牌">
                    <el-input :disabled="dialogDriverVisible" @focus="showDriverList" v-if="isEditDraw" size="mini"
                              v-model="data.licensePlateNumber"
                              style="width:100px;margin: -4px 0;"/>
                    <value v-else :model="data" prop="licensePlateNumber" style="width: 110px"/>
                  </el-descriptions-item>
                </el-descriptions>
                <div v-else
                     style="text-align: center;margin: 40px auto;font-size: 14px;color:rgba(96,98,102,0.5);">
                  <div style="height:44px">
                    <img :src="noData"/>
                  </div>
                  没有送车信息
                </div>
              </div>
            </div>
            <div class="middle" style="width:350px;flex-shrink: 0;">
              <div class="form-wrapper assign">
                <h3>交付信息</h3>
                <div class="scroll-y"
                     :style="{'display': 'inline-block','height':leftHeight,'overflow-x':'hidden','overflow-y':'auto'}">
                  <el-descriptions :column="2" border size="mini" style="overflow: auto;">
                    <el-descriptions-item label="收车人员">
                      <value :model="deliverForm" prop="consigneeName"
                             style="line-height:12px;width: 80px;display: inline-block;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="联系电话">
                      <value :model="deliverForm" prop="consigneePhone"
                             style="line-height:12px;width: 80px;display: inline-block;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="交付凭证" :span="2">
                      <div style="margin: -5px 0;" v-show="deliverForm.takeCarImageList.length==0" class="noImg">
                        暂无图片
                      </div>
                      <div v-show="deliverForm.takeCarImageList.length>0" style="line-height: 12px;margin: -5px 0;">
                        <el-image v-for="url in deliverForm.takeCarImageList" :key="url" :src="url"
                                  style="width: 90px; height: 58px;margin-right: 10px;"
                                  :preview-src-list="deliverForm.takeCarImageList"></el-image>
                      </div>
                    </el-descriptions-item>
                    <el-descriptions-item label="交付备注" :span="2">
                      <value :model="deliverForm" prop="remark" :title="deliverForm.remark"
                             style="line-height:12px;display: inline-block;width:256px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="到付金额">
                      <div v-if="deliverForm.deliveryPayFee" style="color: red;font-size: 12px;">
                        ￥
                        <value :model="deliverForm" prop="deliveryPayFee"/>
                      </div>
                      <value v-else :model="deliverForm" prop="deliveryPayFee"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="支付方式">
                      <value :model="deliverForm" prop="type" dictName="delivery_payment_type"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="转账凭证" :span="2" v-if="deliverForm.type==2">
                      <div v-show="deliverForm.paymentImageList.length==0"
                           class="noImg">
                        暂无图片
                      </div>
                      <div v-show="deliverForm.paymentImageList.length>0">
                        <el-image v-for="url in deliverForm.paymentImageList" :key="url" :src="url"
                                  style="width: 80px; height: 80px;margin-right: 10px;"
                                  :preview-src-list="deliverForm.paymentImageList"></el-image>
                      </div>
                    </el-descriptions-item>
                    <el-descriptions-item label="支付金额" :span="2" v-if="deliverForm.type==3">
                      <value :model="deliverForm" prop="cashFee"/>
                    </el-descriptions-item>
                  </el-descriptions>
                </div>
              </div>
            </div>

            <div id="lineImg" class="right" :style="{'height':rightHeight}">
              <div class="form-wrapper driver" style="width:100%;">
                <h3>验车信息</h3>
              </div>
              <div class="form-wrapper" style="width:100%;display: inline-block">
                <div
                  style="width:130px;display: inline-block;background: #f5f5f5;float: left;font-size: 12px;">
                  <div
                    style="line-height: 61px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;">
                    外观及内饰验车照片
                  </div>
                </div>
                <div class="form-content lineForm"
                     style="margin-left: 130px;border-bottom: 1px #e3e3e3 solid;height:62px;overflow-y: hidden">
                  <div v-show="previewUrl.length==0" class="noImg">
                    暂无图片
                  </div>
                  <div v-show="previewUrl.length>0" style="line-height: 12px">
                    <!--                    <el-image v-for="url in previewUrl" :key="url" :src="url"-->
                    <!--                              style="width: 90px; height: 58px;margin-right: 10px;"-->
                    <!--                              :preview-src-list="previewUrl"></el-image>-->
                    <viewer :images="previewUrl">
                      <img v-for="(url,i) in previewUrl" :id="'img'+i" :src="url" :key="url"
                           :style="{'width': '90px', 'height': '58px','margin-right': '10px','display':i>3?'none':'inline'}">
                      <span class="imgsMore" @click="viewerImg"
                            v-if="previewUrl.length>4">更多</span>
                    </viewer>
                  </div>
                </div>
                <div
                    style="width:130px;display: inline-block;background: #f5f5f5;float: left;font-size: 12px;">
                  <div
                      style="line-height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;">
                    车架/车牌号
                  </div>
                </div>
                <div
                    style="width:140px;display: inline-block;float: left;font-size: 12px;">
                  <div
                      style="line-height: 30px;height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;padding-right: 10px;">
                    {{deliverInfo.vin}}
                  </div>
                </div>
                <div
                    style="width:100px;display: inline-block;background: #f5f5f5;float: left;font-size: 12px;">
                  <div
                      style="line-height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;">
                    公里数
                  </div>
                </div>
                <div
                    style="width:90px;display: inline-block;float: left;font-size: 12px;">
                  <div
                      style="line-height: 30px;height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;">
                    {{deliverInfo.km}}
                  </div>
                </div>
                <div
                    style="width:100px;display: inline-block;background: #f5f5f5;float: left;font-size: 12px;">
                  <div
                      style="line-height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;">
                    验车备注
                  </div>
                </div>
                <div
                    style="font-size: 12px;width: calc(100% - 555px);margin-left: 550px">
                  <div :title="deliverInfo.remark"
                       style="height:30px;line-height: 30px;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;padding-right: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
                    {{deliverInfo.remark?deliverInfo.remark:'-'}}
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
<!--      </el-drawer>-->
      </el-dialog>
    </div>
    <!--添加、修改弹窗-->
    <el-dialog
        :show-close="true"
        :closeOnClickModal="false"
        title="额外费用"
        :visible.sync="dialogVisible"
        width="830px"
        class="customerFormDialog"
    >
      <outlay-manage id="outlayManage" ref="outlayManage" :addScene="4" :id="orderId" :visible.sync="dialogVisible"/>
      <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="addFeeList" size="small">新 增</el-button>
              <el-button @click="dialogVisible = false" size="small">取 消</el-button>
            </span>
    </el-dialog>

    <!--查找结算列表信息-->
    <el-dialog
        :show-close="true"
        :closeOnClickModal="false"
        title="选择结算人"
        :visible.sync="dialogSettlerVisible"
        width="730px"
        class="customerFormDialog"
    >
      <settler-manage ref="settlerManage" @select="selectLink" :id="data.orderId" :visible.sync="dialogSettlerVisible"/>
      <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="addSettlerList" size="small">新 增</el-button>
              <el-button @click="dialogSettlerVisible = false" size="small">取 消</el-button>
            </span>
    </el-dialog>

    <!--查找司机列表信息-->
    <el-dialog
        :show-close="true"
        :closeOnClickModal="false"
        title="选择司机"
        :visible.sync="dialogDriverVisible"
        width="850px"
        class="customerFormDialog"
    >
      <driver-manage ref="driverManage" @select="selectDriverLink" :id="saveForm.companyId"
                     :visible.sync="dialogDriverVisible"/>
      <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="addDriverList" size="small">新 增</el-button>
              <el-button @click="dialogDriverVisible = false" size="small">取 消</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
  import AdSuggestion from '@/components/AdSuggestion'
  import AdTable from '@/components/AdTable'
  import AdTableColumn from '@/components/AdTable/AdTableColumn'
  import adTable from '@/mixins/adTable'
  import Value from '@/components/AdValue'
  import api, {get as deliverRecordApiGetList} from '@/api/sign/deliverRecord';
  import AdUpload from '@/components/AdUpload'
  import noData from '@/assets/404_images/nodata.png';
  import OutlayManage from './components/outlayManage';
  import SettlerManage from '@/components/SettlerManage';
  import DriverManage from '@/components/DriverManage'
  import AdStatusSelect from '@/components/AdStatusSelect'
  import AdStatusSelectNoclear from '@/components/AdStatusSelect/noClear'
  import QRCode from 'qrcodejs2'
  import {
    getCompanyList as getSuggestCompanyList
  } from '@/api/suggestion'
  import apiUser from '@/api/system/user';
  import {parseStatus} from '@/utils/code'

  export default {
    name: 'sign-sign-deliverRecord',
    components: {
      AdTable,
      AdTableColumn,
      AdSuggestion,
      Value,
      AdUpload,
      OutlayManage,
      AdStatusSelect,
      AdStatusSelectNoclear,
      SettlerManage,
      DriverManage
    },
    dicts: ['pick_driver_status', 'sign_status', "takecar_status", "finish_status", "takecar_type", "settlement_type", "sign_type", "delivery_payment_type",'transport_way'],
    mixins: [adTable([
      {name: 'deliverRecord', pk: 'code'},
    ])],
    data() {
      return {
        drawer: false,
        noData,
        orderId: null,
        isEditDraw: false,
        siteArray: [],
        additional: true,
        isInspect: false,
        isShowDriver: false,
        isHasInspect: true,
        rightHeight: 'calc(36vh - 37px)',
        leftHeight: 'calc(36vh - 72px)',
        signForm: {
          orderId: null,
          transportId: null,
          needMoreTransport: null,
          remark: null,
        },
        deliverForm: {
          cashFee: undefined,//现金值
          deliveryPayFee: undefined,
          consigneeName: null,
          consigneePhone: null,
          type: null,
          remark: null,
          orderIdList: [],
          takeCarImageList: [], //交付凭证图
          paymentImageList: [],//支付凭证图
        },
        searchQuery: {
          beginSearchTime: null,
          endSearchTime: null,
          siteId: null
        },
        tableHeight: 440,
        bottomTabHeight: 300,
        topTableData: [
          {creator: '按不出', no: 'http:www.baidu.com'}
        ],
        bottomTableData: [],
        deliverTableData: [],
        saveForm: {
          company: '',
          companyId: null,
          takeCarFee: null,
          settlementId: null,
          settlementName: '',
          settlementPhone: '',
          settlementType: '',
          driverId: null,
          driverName: '',
          driverPhone: '',
          driverCardNumber: '',
          licensePlateNumber: ''
        },
        inspectForm: {
          specification: undefined,
          towHook: undefined,
          ashtray: undefined,
          toolkit: undefined,
          antenna: undefined,
          key: undefined,
          warningSign: undefined,
          licensePlateFrame: undefined,
          aidPacket: undefined,
          footPad: undefined,
          airPump: undefined,
          cigarLighter: undefined,
          spareTire: undefined,
          jack: undefined,
          bellCover: undefined,
          vin: undefined,
          km: undefined,
          remark: undefined,
        },
        deliverInfo: {
          specification: undefined,
          towHook: undefined,
          ashtray: undefined,
          toolkit: undefined,
          antenna: undefined,
          key: undefined,
          warningSign: undefined,
          licensePlateFrame: undefined,
          aidPacket: undefined,
          footPad: undefined,
          airPump: undefined,
          cigarLighter: undefined,
          spareTire: undefined,
          jack: undefined,
          bellCover: undefined,
          vin: undefined,
          km: undefined,
          remark: undefined,
        },
        rules: {
          // company: [
          //   {required: true, message: '必选', trigger: 'blur'},
          // ],
          // settlementName: [
          //   {required: true, message: '必选', trigger: 'blur'},
          // ],
          // settlementType: {required: true, message: '必选', trigger: 'blur'},
          // settlementPhone: [
          //   {required: true, message: '必选', trigger: 'blur'},
          // ]
        },
        inspectRules: {
          vin: [
            {required: true, message: '必填', trigger: 'blur'},
          ],
          km: [
            {required: true, message: '必填', trigger: 'blur'},
          ]
        },
        operates: {
          list: [
            {
              label: '移除',
              type: 'primary',
              icon: '',
              disabled: (index, row) => {
                return false;
              },
              method: (index, row) => {
                this.del(row, index);
              }
            }
          ]
        },
        orderSubNo: '',
        data: {},
        scanQrcodePaySuccess: false,
        isInWarehouse: false,
        validateImages: [],
        images: [],
        previewUrl: [],
        deliverInfoUrl: [],
        dialogVisible: false,
        dialogSettlerVisible: false,
        dialogDriverVisible: false,
      }
    },
    created() {
      let self = this;
      self.deliverRecordGetInitList()
      setTimeout(function () {
        self.tableHeight = document.documentElement.clientHeight - 160;
        // self.tableHeight = document.documentElement.clientHeight - document.getElementById('bottom').offsetHeight - 145;
        self.bottomTabHeight = document.getElementById('bottom').offsetHeight - 35;
      })
      //获取网点信息
      this.getSiteList()

      if (this.detectZoom() == 100) {
        this.rightHeight = 'calc(36vh - 37px)'
        this.leftHeight = 'calc(36vh - 72px)'
      }
      if (this.detectZoom() == 125) {
        this.rightHeight = 'calc(36vh - 17px)'
        this.leftHeight = 'calc(36vh - 52px)'
      }
    },
    methods: {
      deliverRecordApiGetList, parseStatus, getSuggestCompanyList,
      viewerImg: function () {
        document.getElementById('img0').click()
      },
      goBack (row) {
        let self = this
        self.$confirm('是否确定回退?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.finishReDelivery(row.orderId).then(res => {
            if (res.code == 0) {
              self.$notify({
                title: '提示',
                message: '回退成功！',
                position: 'bottom-right',
                type: 'success'
              })
              self.queryList()
            }
          })
        }).catch(() => {
        })
      },
      detectZoom: function () {
        let ratio = 0,
          screen = window.screen,
          ua = navigator.userAgent.toLowerCase();

        if (window.devicePixelRatio !== undefined) {
          ratio = window.devicePixelRatio;
        } else if (~ua.indexOf('msie')) {
          if (screen.deviceXDPI && screen.logicalXDPI) {
            ratio = screen.deviceXDPI / screen.logicalXDPI;
          }
        } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
          ratio = window.outerWidth / window.innerWidth;
        }

        if (ratio) {
          ratio = Math.round(ratio * 100);
        }
        return ratio;
      },
      //查询
      queryList: function () {
        let self = this;
        self.bottomTableData = [];
        self.deliverTableData = [];
        self.isInspect = false;
        self.additional = true;
        self.clearDriverInfo();
        self.deliverRecordGetInitList()
      },
      getSiteList: function () {
        let self = this;
        apiUser.getSiteList().then(res => {
          self.siteArray = res.data
        })
      },
      //修改送车
      editDelivery: function () {
        let self = this;
        self.isEditDraw = true;
      },
      //修改送车保存
      updateTake: function () {
        let self = this;
        if (self.data.takeCarFee == '' || self.data.settlementType == null || self.data.settlementType == '') {
          self.$notify({
            title: '保存',
            message: '请选择结算方式并填写送车费',
            position: 'bottom-right',
            type: 'warning'
          });
          return
        }
        if (isNaN(self.data.takeCarFee)) {
          self.$notify({
            title: '保存',
            message: '送车费必须是数字',
            position: 'bottom-right',
            type: 'warning'
          });
          return
        }
        let ajaxData = {
          orderId: self.data.orderId,
          company: self.data.companyName,
          companyId: self.data.companyId,
          takeCarFee: self.data.takeCarFee,
          settlementId: self.data.settlementId,
          settlementName: self.data.settlementName,
          settlementPhone: self.data.settlementPhone,
          settlementType: self.data.settlementType,
          driverId: self.data.driverId,
          driverName: self.data.driverName,
          driverPhone: self.data.driverPhone,
          driverCardNumber: self.data.driverCardNumber,
          licensePlateNumber: self.data.licensePlateNumber,
        };
        api.updateTake(ajaxData).then(res => {
          if (res.code == 0) {
            self.$notify({
              title: '保存',
              message: res.msg,
              position: 'bottom-right',
              type: 'success'
            });
            self.queryList();
            self.isEditDraw = false;
          } else {
            self.$notify({
              title: '保存',
              message: res.msg,
              position: 'bottom-right',
              type: 'error'
            });
          }
        })
      },
      cellClick(row, column, event) {
        let self = this;
        self.drawer = true;
        self.data = {};
        self.orderId = row.orderId;
        self.orderSubNo = row._row ? row._row.orderSubNo : row.orderSubNo;
        // self.deliverForm.cashFee = row.cashFee;//现金值
        // self.deliverForm.deliveryPayFee = row.deliveryPayFee;
        // self.deliverForm.consigneeName = row.consigneeName;
        // self.deliverForm.consigneePhone = row.consigneePhone;
        // self.deliverForm.type = row.type;
        // self.deliverForm.remark = row.remark;
        self.deliverForm = {};
        api.gegGerifyData(row.orderId).then(res => {
          self.deliverInfo.specification = res.data.specification;
          self.deliverInfo.towHook = res.data.towHook;
          self.deliverInfo.ashtray = res.data.ashtray;
          self.deliverInfo.toolkit = res.data.toolkit;
          self.deliverInfo.antenna = res.data.antenna;
          self.deliverInfo.key = res.data.key;
          self.deliverInfo.warningSign = res.data.warningSign;
          self.deliverInfo.licensePlateFrame = res.data.licensePlateFrame;
          self.deliverInfo.aidPacket = res.data.aidPacket;
          self.deliverInfo.footPad = res.data.footPad;
          self.deliverInfo.airPump = res.data.airPump;
          self.deliverInfo.cigarLighter = res.data.cigarLighter;
          self.deliverInfo.spareTire = res.data.spareTire;
          self.deliverInfo.jack = res.data.jack;
          self.deliverInfo.bellCover = res.data.bellCover;
          self.deliverInfo.vin = res.data.vin;
          self.deliverInfo.km = res.data.km;
          self.deliverInfo.remark = res.data.remark;
          self.previewUrl = res.data.validateImages;
          res.data.validateImages.forEach((d, i) => {
            self.images.push({
              name: d,
              url: d
            })
          })
          self.$refs.adimg.images = [];
          self.$refs.adimg.images = self.images;
        })
        //交付详情
        api.overDetail(row.id).then(resp => {
          self.deliverForm = resp.data;
          self.deliverForm.deliveryPayFee = row.deliveryPayFee;
        })
        if (row.takeId) {
          self.isHasInspect = true;
          api.takeDetail(row.orderId).then(res => {
            self.data = res.data;
          })
        } else {
          self.isHasInspect = false;
        }
        self.additional = false;
        self.isInspect = true;
      },

      selectLink(link) {
        let self = this;
        self.dialogSettlerVisible = false;
        self.saveForm.companyId = link.companyId
        self.saveForm.company = link.companyName
        self.saveForm.settlementId = link.linkmanId
        self.saveForm.settlementName = link.linkmanName
        self.saveForm.settlementPhone = link.linkmanPhone

        self.saveForm.driverId = null;
        self.saveForm.driverName = '';
        self.saveForm.driverPhone = '';
        self.saveForm.driverCardNumber = '';
        self.saveForm.licensePlateNumber = '';
      },
      //选怎司机
      selectDriverLink(link) {
        let self = this;
        self.dialogDriverVisible = false;
        self.saveForm.driverId = link.driverId ? link.driverId : null;
        self.saveForm.driverName = link.driverName;
        self.saveForm.driverPhone = link.phone;
        self.saveForm.driverCardNumber = link.driverCardNumber;
        self.saveForm.licensePlateNumber = link.licensePlateNumber;
      },
      removeLink() {
        let self = this;
        self.saveForm.companyId = ''
        self.saveForm.company = ''
        self.saveForm.settlementId = ''
        self.saveForm.settlementName = ''
        self.saveForm.settlementPhone = undefined
      },
      //清空
      clearFrom: function () {
        let self = this;
        self.removeLink();
        self.signForm.needMoreTransport = null;
        self.signForm.remark = null;
        self.saveForm.takeCarFee = null;
        self.saveForm.settlementType = null;
        self.saveForm.driverName = '';
        self.saveForm.driverPhone = '';
        self.saveForm.driverCardNumber = '';
        self.saveForm.licensePlateNumber = ''
      },
      clearDriverInfo: function () {
        let self = this;
        self.deliverInfo = {
          specification: undefined,
          towHook: undefined,
          ashtray: undefined,
          toolkit: undefined,
          antenna: undefined,
          key: undefined,
          warningSign: undefined,
          licensePlateFrame: undefined,
          aidPacket: undefined,
          footPad: undefined,
          airPump: undefined,
          cigarLighter: undefined,
          spareTire: undefined,
          jack: undefined,
          bellCover: undefined,
          vin: undefined,
          km: undefined,
          remark: undefined,
        }
        self.deliverInfoUrl = [];
      },
      //交付保存
      deliverSave(clientSn) {
        let self = this;
        console.log(clientSn)
        if (!clientSn) {
          if (Number(self.deliverForm.deliveryPayFee) > 0) {
            if (self.deliverForm.type == null || self.deliverForm.type == '') {
              self.$notify({
                title: '保存',
                message: '请选择支付方式',
                position: 'bottom-right',
                type: 'warning'
              });
              return
            }
            if (self.deliverForm.type == 3) {
              if (self.deliverForm.cashFee == null || self.deliverForm.cashFee == '') {
                self.$notify({
                  title: '保存',
                  message: '请输入支付金额',
                  position: 'bottom-right',
                  type: 'warning'
                });
                return
              }
            }
          }
        }
        self.$confirm('是否确定保存?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let ajaxData = {...self.deliverForm};
          self.deliverTableData.forEach(d => {
            ajaxData.orderIdList.push(d.orderId)
          })
          if (clientSn) {
            ajaxData.clientSn = clientSn
          } else {
            ajaxData.clientSn = null
          }
          api.deliverSave(ajaxData).then(res => {
            if (res.code == 0) {
              self.$notify({
                title: '保存',
                message: res.msg,
                position: 'bottom-right',
                type: 'success'
              });
              self.queryList();
              self.deliverForm = {
                cashFee: undefined,//现金值
                deliveryPayFee: undefined,
                consigneeName: null,
                consigneePhone: null,
                type: null,
                remark: null,
                clientSn: null,
                orderIdList: [],
                takeCarImageList: [], //交付凭证图
                paymentImageList: [],//支付凭证图
              };
            } else {
              self.$notify({
                title: '保存',
                message: res.msg,
                position: 'bottom-right',
                type: 'error'
              });
            }
          })
        }).catch(() => {
        });
      },
      //额外费用
      addFee: function () {
        let self = this;
        self.dialogVisible = true;
      },
      //新增
      addFeeList: function () {
        let self = this;
        self.$refs.outlayManage.addDriver();
      },
      //新增结算人
      addSettlerList: function () {
        let self = this;
        self.$refs.settlerManage.addDriver();
      },
      //新增司机
      addDriverList: function () {
        let self = this;
        self.$refs.driverManage.addDriver();
      },
      //显示结算人窗口
      showGetList: function () {
        let self = this;
        self.dialogSettlerVisible = true;
      },
      //显示司机窗口
      showDriverList: function () {
        let self = this;
        if (self.saveForm.companyId == null || self.saveForm.companyId == '') {
          self.$notify({
            title: '司机信息',
            message: '请先选择公司信息',
            position: 'bottom-right',
            type: 'warning'
          });
          return
        }
        self.dialogDriverVisible = true;
      }
    }

  }
</script>

<style lang="scss" scoped>
  .page-table {
    display: flex;
    flex: 1;
    flex-direction: column;

    .box-style {
      display: flex;
      flex: 1;
      border: 1px solid #e3e3e3;
      flex-direction: column;
    }

    .top {
      display: flex;
      flex: 1;
      border-bottom: 1px solid #4da7fa;
      flex-direction: column;

      &:after {
        content: '';
        display: block;
        height: 4px;
        background: #4da7fa;
        opacity: 0.2;
      }

      .table-wrapper {
        flex: 1;
      }

      .table {
        flex: 1;
      }
    }

    .bottom {
      display: flex;
      height: 36vh;
      flex-direction: column;

      .title-bar {
        display: flex;
        line-height: 36px;
        background: #f5f5f5;
        border-bottom: 1px solid #e3e3e3;
        padding-left: 10px;
        flex-shrink: 0;

        .op {
          margin-left: auto;
          margin-right: 12px;
        }
      }

      .content {
        display: flex;
        flex: 1;
        overflow: hidden;

        .left {
          display: flex;

          &:after {
            content: '';
            display: block;
            width: 3px;
            background: #4da7fa;
            opacity: 0.2;
          }
        }

        .middle {
          display: flex;
        }

        .right {
          flex: 1;
          overflow: hidden;

          .table-wrapper {
            height: 100%;
          }
        }

        .form-wrapper {
          display: flex;
          flex: 1;
          flex-direction: column;
          width: 18vw;

          h3 {
            height: 35px;
            box-sizing: border-box;
          }

          .form-content {
            padding: 10px 10px 0 10px;
            box-sizing: border-box;
            overflow-y: auto;

            .el-form-item {
              margin-bottom: 10px;
            }
          }
        }
      }
    }

    .bottom {
      & > .title-bar {
        padding-left: 16px;
        border-bottom: 1px solid #bdd0e3;
        background: #f5f5f5;
        align-items: center;
      }

      h2 {
        font-size: 12px;
      }

      h3 {
        padding-left: 10px;
        border-bottom: 1px solid #e3e3e3;
        background: #f5f5f5;
        line-height: 30px;
        font-size: 12px;
      }

      //.left h3 { border-right: 1px solid #e3e3e3; }
      //.middle h3 { border-left: 1px solid #e3e3e3; }
      .right {
        border-left: 1px solid #e3e3e3;
      }
    }
  }
  ::v-deep .el-table__row {
    height: 55px !important;
  }
</style>